<template>
  <div class="server-body" :style="borderStyle">
    <div class="server-header">
      <div class="server-header-title" :style="headerBorder">
        <span>全部服务</span>
      </div>
      <div class="server-query-body">
        <div class="server-query-input" :style="headerBorder">
          <input v-model="query.blurry" placeholder="请输入服务名称或受理地点" @input="queryObject">
          <div
            class="query-button"
            :style="headerBorder"
            @click="queryObject"
          >
            <i class="el-icon-search" />
          </div>
        </div>
      </div>
      <div class="server-query-item">
        <query-item
          v-for="(item, index) in queryList"
          :key="'query-' + index"
          :params="item"
          @call-back="callBack"
        />
      </div>
    </div>
    <div class="server-content-body">
      <el-scrollbar
        style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
      >
        <el-empty
          v-if="dataList === null || dataList.length === 0"
          :image-size="100"
        />
        <div v-else class="content-body">
          <div
            v-for="(item, index) in dataList"
            :key="'server-li-' + index"
            class="content-ul"
          >
            <div class="content-query">
              <div class="content-query-title" :style="headerBorder">
                {{ item.bmmc }}
                <i
                  class="title-i"
                >({{ item.dataList === null ? 0 : item.dataList.length }})</i>
              </div>
            </div>
            <div class="content-server">
              <div
                v-for="(obj, indexService) in item.dataList"
                :key="'server-' + indexService"
                class="custom-right-li"
                @click="openEntity(obj)"
              >
                <el-card
                  shadow="hover"
                  style="height: 100%"
                >
                  <div class="right-li-body">
                    <div class="custom-li-image">
                      <el-image
                        lazy
                        class="custom-image"
                        :src="baseURL+obj.pcIcon"
                      />
                    </div>
                    <div class="custom-li-title">
                      <div class="li-line">{{ obj.name }}</div>
                      <div class="li-line custom-font">
                        {{ obj.ssxtmc + " / " + obj.blfsmc }}
                      </div>
                    </div>
                    <div class="custom-li-button">
                      <i class="el-icon-video-play" />
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import QueryItem from './slot/item'
import { layout } from '@/mixins/layout'
import { service, openEntity } from '@/mixins/template'
export default {
  name: 'OfficeHallPcManager',
  components: { QueryItem },
  mixins: [service, openEntity, layout],
  computed: {
    headerBorder() {
      return {
        '--border-color': this.layoutTheme.menuBorderColor,
        '--active-color': this.layoutTheme.menuActiveColor,
        '--menu-bak-color': this.layoutTheme.menuBackground
      }
    }
  },
  methods: {
    callBack(obj) {
      this.query[obj.code] = obj.value
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.server-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 10px;
  box-sizing: border-box;
}
.server-header {
  width: 100%;
  .server-header-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid var(--border-color);
    color: var(--active-color);
    span {
      display: block;
      width: 105px;
      height: 50px;
      text-align: center;
      position: relative;
      line-height: 50px;
      font-weight: 500;
      font-size: 1.1rem;
    }
    span:after {
      content: '';
      position: absolute;
      height: 2px;
      bottom: 0;
      left: 5px;
      right: 5px;
      background-color: var(--active-color);
    }
  }
  .server-query-body {
    height: 50px;
    margin-left: 20px;
    .server-query-input {
      width: 300px;
      height: 40px;
      margin-top: 5px;
      display: flex;
      border-radius: 2px;
      border: 1px solid var(--border-color);
      input {
        width: 240px;
        height: 30px;
        margin-top: 5px;
        border: none;
        margin-left: 20px;
        outline: none;
      }
      .query-button {
        width: 40px;
        height: 39px;
        text-align: center;
        line-height: 39px;
        cursor: pointer;
        background-color: var(--active-color);
        color: var(--menu-bak-color);
        border-radius: 0 2px 2px 0;
      }
    }
  }
}
.server-content-body {
  flex: 1 1 auto;
  overflow: hidden;
}
.custom-right-li {
  cursor: pointer;
}
.right-li-body {
  width: 100%;
  height: 70px;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}
.custom-li-button {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  right: -5px;
  color: #a8abb2;
  font-size: 1.1rem;
  text-align: center;
  line-height: 40px;
}
.custom-li-title {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  padding: 5px 0;
  box-sizing: border-box;
}
.custom-image {
  width: 40px;
}
.custom-font {
  font-size: 0.8rem;
  color: #8c939d;
}
.li-line {
  flex: 0 1 auto;
  height: 65%;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
}
.content-ul {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-flow: column nowrap;
}
.content-query {
  width: 100%;
  height: 45px;
  line-height: 45px;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}
.content-query-title {
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  font-weight: bolder;
  text-align: left;
  border-bottom: 1px solid #eeeeee;
  text-indent: 20px;
}
.content-query-title::before {
  content: " ";
  position: absolute;
  left: 20px;
  top: 10px;
  height: 25px;
  width: 4px;
  border-radius: 2px;
  background-color: var(--active-color);
}
.title-i {
  font-size: 0.9rem;
  color: #909399;
}
.content-server {
  height: inherit;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.el-scrollbar ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

@media screen and (min-width: 1200px) {
  .custom-right-li {
    width: 20%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card ::v-deep .el-card__body {
    padding: 5px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .custom-right-li {
    width: 20%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card ::v-deep .el-card__body {
    padding: 5px;
  }
}

@media screen and (max-width: 1024px) {
  .custom-right-li {
    width: 25%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card ::v-deep .el-card__body {
    padding: 5px;
  }
}
</style>
